<template>
  <van-swipe
    style="height: 100vh;"
    vertical
    :show-indicators="false"
    :autoplay="'false'"
    lazy-render
    @change="onChange"
  >
    <van-swipe-item v-for="item in pageList" :key="item.id">
      <PubVideo
        ref="smallVideo"
        class="detail-video"
        :id="item.id"
        :config="item.videoConfig"
      />
      <div class="back" @click="goBack">fanhui</div>
      <div class="user-info">
        <div>
          <van-icon name="cart" color="#ee0a24" />
          购物 | 好评前十的猫罐头
        </div>
        <div>@这是用户昵称</div>
        <p class="content">这是视频标题这是视频标题这是题这是视频标题这是视频标题 #标签 #标签标签</p>
        <span>♪ @xxx创作的原声</span>
      </div>
      <div class="user-tendency">
        <img :src="item.videoConfig.poster" alt="">
        <UserTendency
          :className="'g-m-t-10'"
          :values="item.tendency"
          @success="updateData"
        />
      </div>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant'
import PubVideo from '@/components/pub-video/index'
import UserTendency from './components/user-tendency'

export default {
  name: 'Detail',
  components: {
    PubVideo,
    UserTendency
  },
  setup() {
    const smallVideo = ref(null)
    const route = useRoute()
    const state = reactive({
      videoDetailId: route.query.from || '1',
      pageList: []
    })

    const getVideoDetail = () => {
      return {
        code: 200,
        data: {
          list: [{
            poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            // link: 'http://dlhls.cdn.zhanqi.tv/zqlive/22578_yKdJM.m3u8'
            // link: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
            link: 'https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/mp4/1_1920x1080.mp4'
            // link: 'https://www.bilibili.com/video/BV1CZ4y1z7Mf.m3u8'
            // link: 'http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8'
            // link: 'https://v26-web.douyinvod.com/a6855ed0c1be16ec3f81aafaa7deadd2/62358182/video/tos/cn/tos-cn-ve-15-alinc2/7b325d7a2377420e8d3880b76c48d46a/?a=6383&br=1163&bt=1163&cd=0%7C0%7C0%7C0&ch=5&cr=0&cs=0&cv=1&dr=0&ds=3&er=&ft=5q_lc5mmnPkC2Xt7HhWwkXAGfdH.CvJGVbZc&l=202203191405340101590451440B4F7CCB&lr=all&mime_type=video_mp4&net=0&pl=0&qs=0&rc=amoza2k6ZjN1OjMzNGkzM0ApN2k3aTY3ZDtmNzo7ZjY1aWdlYDU0cjRnbG1gLS1kLTBzczExYjJhX2EuLmMzNTBjNTU6Yw%3D%3D&vl=&vr='
            // link: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
          }, {
            poster: '//d302.paixin.com/thumbs/2712843/141887850/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            link: 'https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/mp4/1_1920x1080.mp4'
          }, {
            poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            link: 'https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/mp4/1_1920x1080.mp4'
          }]
        }
      }
    }

    const getPageData = async (query) => {
      const { data } = await getVideoDetail(query)
      if (!data) {
        state.pageList = []
        goBack()
        return
      }
      state.pageList = data.list.map((el, index) => {
        return {
          id: 'video' + index,
          tendency: [{
            isActived: false,
            count: 99
          }, {
            isActived: false,
            count: 99
          }, {
            isActived: false,
            count: 99
          }, {
            isActived: false,
            count: 99
          }],
          videoConfig: {
            autoplay: !index,
            video: el.link,
            poster: el.poster
          }
        }
      })
    }
    getPageData({
      id: state.videoDetailId
    })

    let currentIndex = 0
    const onChange = index => {
      smallVideo[state.pageList[currentIndex].id].value.ckplayer.pause()
      smallVideo[state.pageList[index].id].value.ckplayer.play()
      currentIndex = index
    }

    const updateData = val => {
      console.log(smallVideo.value)
      switch (val.name) {
        case 'follow':
          Toast('xiexie关注')
          break
        case 'like':
          state.pageList[currentIndex].tendency[val.index].isActived = !state.pageList[currentIndex].tendency[val.index].isActived
          Toast('赞赞赞赞赞赞')
          break
        case 'star':
          state.pageList[currentIndex].tendency[val.index].isActived = !state.pageList[currentIndex].tendency[val.index].isActived
          Toast('收藏')
          break
        case 'chat':
          Toast('留言')
          break
        case 'share':
          Toast('分享')
          break
      }
    }

    const router = useRouter()
    const goBack = () => {
      Toast(`无操作权限\n请前往 ‘我的’ 充值开通会员`)
      router.go(-1)
    }

    return {
      ...toRefs(state),
      smallVideo,
      onChange,
      updateData,
      goBack
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-video {
  height: 100vh;
}
.back {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  z-index: 1;
}
.user-info {
  position: absolute;
  left: 10px;
  bottom: 70px;
  color: #fff;
  z-index: 1;
  .content {
    max-width: 60%;
  }
}
.user-tendency {
  position: absolute;
  right: 10px;
  bottom: 70px;
  color: #fff;
  z-index: 1;
  img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
}
</style>